<template>
  <n-card
    footer-style='
        font: italic 0.8rem "Fira Sans";
    '
    hoverable
    bordered
    :segmented="{
      content: true,
    }"
  >
    <template #header>
      <div>
        <router-link
          class="title"
          :to="{
            name: 'ArticleDetailsView',
            params: {
              id: article.id,
            },
          }"
          >{{ article.title }}</router-link
        >
        <n-text class="dyn-time">
          <n-text style="color: #99a2aa"
            >{{ article.author_nickname }} ·
          </n-text>

          <n-time :time="article.create_time"></n-time
        ></n-text>
      </div>

      <n-button
        v-if="article.collection"
        class="collection"
        ghost
        strong
        size="tiny"
        color="#3271ae"
        @click="to_collection_content(article.collection.id)"
      >
        {{ article.collection.name }}
      </n-button>
    </template>
    <template #header-extra v-if="$store.state.user.is_staff">
      <n-tag size="small" :type="article.is_active ? 'success' : 'default'">
        {{ article.is_active ? "√ 广播中" : "一 未广播" }}
      </n-tag>
    </template>
    <n-ellipsis expand-trigger="click" line-clamp="1" :tooltip="false">
      {{ article.brief }}
    </n-ellipsis>

    <template #footer>
      <n-space size="small">
        <template v-for="badge of article.badges" :key="badge.badge">
          <n-tag
            :type="$store.state.badge.dirt[badge.badge].type"
            v-if="$store.state.badge.dirt[badge.badge]"
            size="small"
            round
            @click="to_badge_article(badge.badge)"
            class="click"
            >{{ $store.state.badge.dirt[badge.badge].name }} |
            {{ badge.count }}</n-tag
          ></template
        >
      </n-space>
      <n-space justify="end">
        创建时间:<n-time
          :time="new Date(article.create_time)"
          type="relative" />
        | 最近修改:<n-time
          :time="new Date(article.update_time)"
          type="relative"
      /></n-space>
    </template>
    <!-- <template #action> #action </template> -->
  </n-card>
</template>

<script>
import routerJump from "@/composables/RouterJump";

export default {
  props: {
    article: {
      type: Object,
      required: true,
    },
  },
  setup() {
    const { to_collection_content, to_badge_article } = routerJump();
    return {
      to_collection_content,
      to_badge_article,
    };
  },
};
</script>

<style scoped>
.title {
  text-decoration: unset;
  color: #000;

  line-height: 1;
}
.title:hover {
  text-decoration: underline;
}
.click {
  cursor: pointer;
}
.dyn-time {
  color: #99a2aa;
  display: block;
  font-size: 12px;
  margin-top: 0px;
  line-height: 1;
}
</style>